<template>
  <div class="home">
    <!-- 1.栅格布局 -->
    <el-row :gutter="10">
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
        <div class="dashboard-item" style="background: #0073b7">
          <p>目前确诊人数:{{ obj.qz }}</p>
        </div>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
        <div
          class="dashboard-item"
          style="background-color: #00a65a !important"
        >
          <p>治愈人数:{{ obj.zy }}</p>
        </div>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
        <div
          class="dashboard-item"
          style="background-color: #f39c12 !important"
        >
          <p>死亡人数:{{ obj.sw }}</p>
        </div>
      </el-col>
      <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24">
        <div
          class="dashboard-item"
          style="background-color: #dd4b39 !important"
        >
          <p>密接人数:{{ obj.mj }}</p>
        </div>
      </el-col>
    </el-row>
    <div class="chart1"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import requset from "@/utils/request";
import countTo from "vue-count-to";
export default {
  components: { countTo },
  data() {
    return {
      obj: {},
      list: [
        { val: 13594, title: "最高可借金额", color: "#67ca3a" },
        { val: 9833, title: "回报率", color: "#ff6600" },
        { val: 8888, title: "业绩领跑", color: "#f56c6c" },
        { val: 6666, title: "安稳底薪战队", color: "#409eff" },
      ],
    };
  },
  mounted() {
    this.getdata();
 
  },
  methods: {
    async getdata() {
      const res = await requset(`/base/indextotal?name=`);
      this.obj = res.data;
      console.log(res);
         this.initCharts();
    },
    initCharts() {
      // this是绑定Vue实例,后续改变页面的大小,更新图表的大小
      this.chart1 = echarts.init(document.querySelector(".chart1"));
      // 绘制图表
      //图表配置，复制就是
      let option1 = {
        
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [
              { value: this.obj.qz, name: "确诊" },
              { value: this.obj.zy, name: "治愈" },
              { value: this.obj.sw, name: "死亡" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      //应用配置生成图表
      this.chart1.setOption(option1);
    },
    resize() {
      this.chart1.resize();
    },
  },
};
</script>
<style lang="scss" scoped>
.dashboard-item {
  height: 200px;
  line-height: 100px;
  font-weight: bold;
  color: #fff;

  > p {
    color: black;
    height: 40px;
    margin: 0;
  }
}
.chart1 {
  height: 400px;
  width: 100%;
}
.echarts-box {
  .chart2,
  .chart3 {
    width: 50%;
    height: 400px;
  }
  .chart2 {
    float: left;
  }
  .chart3 {
    float: right;
  }
}
</style>
